<script>
export default type;
import type from "./index";
</script>
<!--src 引用css样式-->
<style src="./index.css" lang="css"></style>

<template>
  <div class="brand-wrapper">
    <!--搜索功能-->
    <div class="search-form">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="品牌名称" size="mini">
          <el-input placeholder="品牌名称" v-model="searchParams.brandName"></el-input>
        </el-form-item>
<!--        <el-form-item label="日期选项" size="mini">-->
          <!--日期组件-->
          <!--<el-date-picker-->
              <!--v-model="pickerOptions.startDate"-->
              <!--type="datetimerange"-->
              <!--:picker-options="pickerOptions"-->
              <!--value-format="yyyy-MM-dd HH:mm:ss"-->
              <!--range-separator="-"-->
              <!--start-placeholder="开始日期"-->
              <!--end-placeholder="结束日期"-->
              <!--align="right"-->
              <!--@change="chooseTime">-->
          <!--</el-date-picker>-->

<!--        </el-form-item>-->

        <el-button type="primary" size="mini" @click="searchPage">查询</el-button>
        <el-button type="warning" size="mini" @click="resetForm">重置</el-button>
      </el-form>
    </div>
    <!--查询按钮-->

    <div class="crud-box">
      <el-button type="primary" icon="el-icon-edit" size="mini" @click="dialogFormVisible=true,formData={},imageUrl=''">新建</el-button>
<!--      <el-button type="success" icon="el-icon-edit" size="mini" :disabled="batchIds.length!=1"-->
<!--                 @click="dialogFormVisible=true,findById()">修改-->
<!--      </el-button>-->
      <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="batchIds.length<=0" @click="showMsg()">删除
      </el-button>
    </div>

    <!--table表格-->
    <div class="table-box">

      <el-table
          :data="tableData"
          style="width: 100%"
          @selection-change="selectChange">
        <el-table-column
            type="selection"
            width="55" align="center">
        </el-table-column>
        <el-table-column
            prop="id"
            label="品牌id"
            width="300" align="center">
        </el-table-column>
         <el-table-column
            prop="brandName"
            label="品牌名称"
            width="300" align="center">
        </el-table-column>
        <el-table-column
            prop="brandSite"
            label="品牌站点"  align="center">
          <template v-slot="suibian">
            <a :href="suibian.row.brandSite">{{suibian.row.brandSite}}</a>
          </template>
        </el-table-column>

        <el-table-column
            prop="address"
            label="操作" align="center">

          <template v-slot="obj">
            <el-button type="success" icon="el-icon-edit" size="mini"
                       @click="dialogFormVisible=true,formData.id=obj.row.id,findById(obj.row)"
                       style="margin-right: 5px"></el-button>
            <el-popconfirm
                confirm-button-text='确定'
                cancel-button-text='取消'
                icon="el-icon-info"
                icon-color="red"
                title="确定删除吗？"
                @confirm="deleteById">
              <el-button type="danger" slot="reference" icon="el-icon-delete" size="mini"
                         @click="id=obj.row.id"></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页-->
    <div class="page-box">
      <el-pagination
          background
          layout="prev, pager, next"
          :current-page="this.searchParams.currentPage"
          :page-size="this.searchParams.pageSize"
          @current-change="currentPageChange"
          :total="total" align="right">
      </el-pagination>
    </div>

    <!-- 弹框dialog-->
    <div class="dialog-box">
      <el-dialog title="新建/修改" :visible.sync="dialogFormVisible" width="30%">
        <el-form :model="formData" label-width="80px">
          <el-form-item label="品牌名称" size="mini">
            <el-input autocomplete="off" v-model="formData.brandName"></el-input>
          </el-form-item>
          <el-form-item label="品牌站点" size="mini">
            <el-input autocomplete="off" v-model="formData.brandSite"></el-input>
          </el-form-item>

<!--          <el-form-item label="类型描述" size="mini">-->
<!--            <el-input autocomplete="off" v-model="formData.typeDescribe"></el-input>-->
<!--          </el-form-item>-->
          <el-form-item label="品牌描述" size="mini">
            <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="formData.brandDescribe">
            </el-input>
          </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false,saveOrUpdate()" size="mini">确 定</el-button>
        </div>
      </el-dialog>
    </div>

  </div>
</template>
